<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小马儿 - 注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="Shortcut Icon" href="img/horse.ico">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#CC6688',
                        secondary: '#FFD7E4',
                        neutral: '#F8F9FA',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, #CC6688 0%, #FF9AA2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2">
                <i class="fa fa-horse text-primary text-2xl"></i>
                <span class="text-xl font-bold text-dark">小马儿</span>
            </a>
            <div class="hidden md:flex space-x-6">
                <a href="index.html" class="text-dark hover:text-primary transition-custom">首页</a>
                <a href="#" class="text-dark hover:text-primary transition-custom">产品</a>
                <a href="#" class="text-dark hover:text-primary transition-custom">服务</a>
                <a href="#" class="text-dark hover:text-primary transition-custom">关于我们</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="login.html" class="text-dark hover:text-primary transition-custom">登录</a>
                <a href="register.html" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition-custom">注册</a>
                <button class="md:hidden text-dark">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow flex items-center justify-center py-12 px-4">
        <div class="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
            <!-- 左侧图片区 -->
            <div class="md:w-1/2 relative overflow-hidden">
                <img src="https://picsum.photos/id/1005/800/1000" alt="注册页面背景图" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent flex flex-col justify-end p-8 text-white">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow mb-2">加入我们的大家庭</h2>
                    <p class="text-lg mb-4">与成千上万的用户一起体验我们的服务</p>
                    <div class="flex space-x-4">
                        <i class="fa fa-check-circle text-xl"></i>
                        <i class="fa fa-star text-xl"></i>
                        <i class="fa fa-heart text-xl"></i>
                    </div>
                </div>
            </div>
            
            <!-- 右侧表单区 -->
            <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                <div class="text-center mb-8">
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">创建新账户</h1>
                    <p class="text-gray-500">已有账号？<a href="login.html" class="text-primary hover:underline">立即登录</a></p>
                </div>
                
                <form id="registerForm" class="space-y-5">
                    <div class="space-y-2">
                        <label for="tel" class="block text-sm font-medium text-gray-700">手机号码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-phone text-gray-400"></i>
                            </div>
                            <input type="tel" id="tel" name="tel" placeholder="请输入您的手机号码" 
                                class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium text-gray-700">设置密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" name="password" placeholder="请设置6-16位密码" 
                                class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="confirmPassword" class="block text-sm font-medium text-gray-700">确认密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" 
                                class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="terms" class="text-gray-600">我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a></label>
                        </div>
                    </div>
                    
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition-custom flex items-center justify-center">
                        <span>立即注册</span>
                        <i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </form>
                
                <div class="mt-8 text-center">
                    <p class="text-gray-500">或者通过以下方式注册</p>
                    <div class="flex justify-center space-x-4 mt-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-[#1DA1F2]/10 flex items-center justify-center text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-[#4267B2]/10 flex items-center justify-center text-[#4267B2] hover:bg-[#4267B2]/20 transition-custom">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-[#EA4335]/10 flex items-center justify-center text-[#EA4335] hover:bg-[#EA4335]/20 transition-custom">
                            <i class="fa fa-google"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-horse text-primary text-2xl"></i>
                        <span class="text-xl font-bold">小马儿</span>
                    </div>
                    <p class="text-gray-400">小马儿提供最优质的服务，让您的生活更加便捷。</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-custom">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-custom">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-custom">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-custom">产品</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-custom">服务</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-custom">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-map-marker text-primary mt-1"></i>
                            <span class="text-gray-400">北京市朝阳区建国路88号</span>
                        </li>
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-phone text-primary mt-1"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-envelope text-primary mt-1"></i>
                            <span class="text-gray-400">contact@xiaomaer.com</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">订阅我们</h3>
                    <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新的产品和服务信息。</p>
                    <form class="flex">
                        <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary w-full">
                        <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-custom">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
                <p>© 2025 小马儿 All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // 表单验证
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const tel = document.getElementById('tel').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const terms = document.getElementById('terms').checked;
            
            let isValid = true;
            
            // 验证手机号码
            if (!tel || !/^1[3-9]\d{9}$/.test(tel)) {
                alert('请输入有效的手机号码');
                isValid = false;
            }
            
            // 验证密码长度
            if (password.length < 6 || password.length > 16) {
                alert('密码长度应为6-16位');
                isValid = false;
            }
            
            // 验证两次密码是否一致
            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                isValid = false;
            }
            
            // 验证是否同意条款
            if (!terms) {
                alert('请同意服务条款和隐私政策');
                isValid = false;
            }
            
            if (isValid) {
                // 这里可以添加表单提交逻辑
                alert('注册信息提交成功！');
                this.reset();
            }
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 10) {
                nav.classList.add('py-2', 'shadow-lg');
                nav.classList.remove('py-3', 'shadow-md');
            } else {
                nav.classList.add('py-3', 'shadow-md');
                nav.classList.remove('py-2', 'shadow-lg');
            }
        });
    </script>
</body>
</html>
    